<template>
	<view class="category">
			<scroll-view scroll-x class="bg-white nav text-center">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabNav" :key="index"
					 @tap="tabSelect" :data-id="index">
						{{tabNav[index]}}
					</view>
				</view>
			</scroll-view>
			<button class="area-btn cu-btn round block line-green lg" @click="showArea()">{{this.selectedCity==null?'请选择地区':this.selectedCity}}</button>
			<view v-for="(item, i) in dataList">
				<view class="title">{{item.title}}</view>
				<view class="paint">
					<image class="category-img" :src="item.image"></image>
				</view>
			</view>
			
		
		<!-- 多级联动 -->
		<u-select v-model="show_area" mode="mutil-column-auto" :list="cityList" @confirm="confirm"></u-select>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_area: false,
				TabCur: 0,
				tabNav: ['漆面膜', '窗膜'],
				cityList:[],
				dataList:[],
				selectedCity:null,
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = parseInt(e.currentTarget.dataset.id);
				this.getData();
			},
			showArea() {
				this.show_area = true;
			},
			confirm(e) {
				this.selectedCity = e[0].label + '/' +e[1].label;	
				this.getData();
			},
			async getData(){
				if(this.selectedCity == null) return;
				let res = await this.$api.getArchives({
					model:8,
					channel:41,
					condition: "'" + this.selectedCity + "' = `auth_area` AND " + (this.TabCur + 1) + " = `auth_type`"
				});
				if(res.code){
					this.dataList = res.data.archivesList;
				}
			},
			async getCityList(){
				let res = await this.$api.getAllCities();
				if(res.code){
					//在前端处理一下数据
					let cities = [];
					for(let key in res.data){
						let city = [];
						for(let c in res.data[key]){
							city.push({
								label:res.data[key][c]
							});
						}
						cities.push({
							label: key,
							children: city
						})
					}
					this.cityList = cities;
				}
			}
		},
		onLoad() {
			this.getCityList();
		}
	}
</script>

<style lang="scss" scoped>

	.category {
		height: 150upx;
	}

	.title{
		font-size: 40upx;
		text-align: center;
	}

	.paint {
		text-align: center; 
	}

	.category-img {
		margin: 35upx;
		width: 650upx;
		height: 650upx;
		padding: 10upx;
		border: 2upx solid grey;
		border-radius: 20upx;
		text-align: center;
	}
	
	.area-btn{
		width: 650upx;
		margin:50upx;
	}
</style>
